import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Row, Col, Button, Space, Tabs, Input, InputNumber, Switch } from 'antd';
import { connect } from 'umi';
import { goodsType_status } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import { DragHandle } from '@/components/TableDataBlock/SortBlock';
import SelectModel from '@/components/PackagingModel/components/SelectModel'
const SettingOpeational = (props, ref) => {
  const { detail = {}, defaultDataList = [], disabled = false, dispatch, reload } = props
  const { } = detail
  const [data, setData] = useState([])
  const [visible, setVisible] = useState(false)
  const handeleSaveGoodsCommerce = (e) => {
    let list = Object.values(e).reduce((item, val) => {
      return [...item, ...val.map(o => {
        const { id } = o
        return id
      })]
    }, [])
    dispatch({
      type: 'liveStreaming/fakeSaveGoodsCommerce',
      payload: {
        commerceGoodsIdList: list,
        goodsId: detail.id
      },
      callback: () => { reload && reload() }

    })
  }
  const handleRemove = (value) => {
    const { record } = value
    dispatch({
      type: 'liveStreaming/fakeDeleteGoodsCommerceGoods',
      payload: {
        commerceGoodsId: record.id,
        goodsId: detail.id
      },
      callback: () => { reload && reload() }
    })
  }
  const onChange = (checked, val) => {
    if (checked) {
      dispatch({
        type: 'liveStreaming/fakeEnableGoodsCommerceGoods',
        payload: {
          goodsId: detail.id,
          commerceGoodsId: val
        },
        callback: (e) => {
          reload()
        }
      })
    }
    else {
      dispatch({
        type: 'liveStreaming/fakeDisableGoodsCommerceGoods',
        payload: {
          goodsId: detail.id,
          commerceGoodsId: val
        },
        callback: (e) => {
          reload()
        }
      })
    }
  }
  const setSelectList = () => {
    return data.reduce((item, val) => {
      const { goodsType } = val
      if (item[goodsType]) {
        item[goodsType].push({ ...val, id: val.commerceGoodsId })
        return item
      } else {
        item[goodsType] = []
        item[goodsType].push({ ...val, id: val.commerceGoodsId })
        return item
      }
    }, {})
  }
  const getColumns = [
    {
      title: '排序',
      dataIndex: 'sort',
      render: () => {
        return <DragHandle></DragHandle>
      }
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    }, {
      title: '商品类型',
      dataIndex: 'goodsType',
      render: (val) => {
        return goodsType_status[val]
      },
    },
    {
      title: '显示状态',
      dataIndex: 'status',
      render: (val, record) => {
        return <Switch checked={val === '1'} onChange={(e) => onChange(e, record.id)} />
      },
    }, {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '移除',
          click: () => {
            handleRemove({ record })
          }
        }]
    }]

  useEffect(() => {
    setData(defaultDataList.map(val => {
      return {
        ...val, id: val.commerceGoodsId
      }
    }))
  }, [defaultDataList])


  return (
    <>
      <Col offset={3} span={21}>
        <Button onClick={() => {
          setVisible({ show: true, details: {} })
        }}>添加带货</Button>
      </Col>
      {Object.values(data).length > 0 && <Col style={{ marginTop: 12 }} offset={3} span={21}>
        <TableDataBlock
          tableSort={{
            key: 'id',
            onSortEnd: (e) => {
              dispatch({
                type: 'liveStreaming/fakeSortGoodsCommerce',
                payload: {
                  goodsId: detail.id,
                  sortGoodsList: e.map((item, index) => {
                    return {
                      commerceGoodsId: item.commerceGoodsId,
                      sortValue: index
                    }
                  })
                },
                callback: () => {
                  reload && reload()
                }
              })
            }
          }}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          list={data}
        ></TableDataBlock>
      </Col>}
      <SelectModel getCheckboxProps={(record, goodsType) => {
        return {
          id: record.id,
          disabled: record.id === detail.id
        }
      }} onOk={handeleSaveGoodsCommerce} visible={visible} data={detail} onClose={() => setVisible(false)}></SelectModel>
    </>


  )
};
export default forwardRef(SettingOpeational)